<template>
  <view class="rich-text-container">
    <!-- 页头 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <view class="header-right">
          <text class="save-btn" @click="handleSaveContent">确定</text>
        </view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="content">
      <!-- 标题和提示 -->
      <view class="title-section">
        <text class="main-title">{{ pageTitle }}</text>
        <text class="subtitle">{{ tipText }}</text>
      </view>

      <!-- 富文本编辑器 -->
      <view class="editor-container">
        <editor
          id="editor"
          class="ql-container"
          :placeholder="placeholderText"
          show-img-size
          show-img-toolbar
          show-img-resize
          @statuschange="onStatusChange"
          @ready="onEditorReady"
          @input="onInput"
        ></editor>

        <!-- 字数统计 -->
        <view class="stats-container">
          <view class="word-count">
            <text class="word-count-text"
              >字数: {{ currentWordCount }}/500</text
            >
          </view>
        </view>
      </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="toolbar">
      <view class="toolbar-container">
        <!-- 有序列表 -->
        <view class="tool-item" @click="insertOrderedList">
          <image
            class="tool-icon"
            src="/static/icons/candidate/orderlist.png"
          ></image>
        </view>

        <!-- 无序列表 -->
        <view class="tool-item" @click="insertUnorderedList">
          <image
            class="tool-icon"
            src="/static/icons/candidate/unorderlist.png"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

// 页面参数
const pageType = ref(""); // 'workContent', 'projectDescription', 'projectAchievement'
const pageTitle = ref("");
const tipText = ref("");
const placeholderText = ref("");

// 编辑器实例
let editorCtx = null;

// 编辑器格式状态
const formats = reactive({});

// 当前字数统计
const currentWordCount = ref(0);

// 页面类型配置
const pageConfigs = {
  workContent: {
    title: "工作内容",
    tip: "描述工作背景、复杂的内容、克服的困难、取得的成果，便于HR了解您丰富的经验",
    placeholder:
      "• 负责公司核心业务系统的开发与维护\n• 参与系统架构设计，优化系统性能\n• 解决技术难题，提升开发效率",
  },
  projectDescription: {
    title: "项目描述",
    tip: "简述项目内容，向HR展示您丰富的经验",
    placeholder: "1. 项目概况\n2. 人员分工\n3. 我的责任",
  },
  projectAchievement: {
    title: "项目业绩",
    tip: "简述项目业绩，向HR展示您的工作能力",
    placeholder: "1. 项目收益\n2. 我的贡献\n3. 我的收获",
  },
  jobDesc: {
    title: "职位描述",
    tip: "请对当前职位进行详尽的描述",
    placeholder: "1. 工作内容\n2. 任职要求\n3. 特别说明",
  },
};

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};

  console.log("页面参数:", options);

  let content = options.value || "";
  
  // 尝试双重解码，如果失败则使用单次解码
  try {
    content = decodeURIComponent(decodeURIComponent(content));
  } catch (error) {
    console.warn("双重解码失败，尝试单次解码:", error);
    try {
      content = decodeURIComponent(content);
    } catch (error2) {
      console.warn("单次解码也失败，使用原始值:", error2);
      content = content;
    }
  }

  const params = {
    content: content,
  };

  console.log("解析后的参数:", params);

  return params;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 保存内容
const handleSaveContent = () => {
  if (editorCtx) {
    editorCtx.getContents({
      success: (res) => {
        console.log("保存内容:", res);

        // 验证字数限制
        const textLength = getTextLength(res.text);
        if (textLength > 500) {
          uni.showToast({
            title: "字数不能超过500字",
            icon: "none",
          });
          return;
        }

        // 返回上一页并传递数据
        const pages = getCurrentPages();
        if (pages.length > 1) {
          const prevPage = pages[pages.length - 2];

          // 方法1：通过页面实例直接调用方法
          if (prevPage && prevPage.$vm && prevPage.$vm.updateFieldValue) {

            
            // 根据页面类型更新不同的字段
            switch (pageType.value) {
              case "workContent":
                prevPage.$vm.updateFieldValue("content", res.text);
                prevPage.$vm.updateFieldValue("contentHtml", res.html);
                break;
              case "projectDescription":

                
                prevPage.$vm.updateFieldValue("projectDescription", res.text);
                prevPage.$vm.updateFieldValue(
                  "projectDescriptionHtml",
                  res.html
                );
                break;
              case "projectAchievement":
                prevPage.$vm.updateFieldValue("projectAchievement", res.text);
                prevPage.$vm.updateFieldValue(
                  "projectAchievementHtml",
                  res.html
                );
                break;
              case "jobDesc":
                prevPage.$vm.updateFieldValue("jobDesc", res.text);
                prevPage.$vm.updateFieldValue("jobDescHtml", res.html);
                break;
            }
          }

          
          // 方法2：通过全局事件总线传递数据（备用方案）
          uni.$emit("updateRichText", {
            type: pageType.value,
            content: res.text,
            contentHtml:res.html
          });
        }

        uni.showToast({
          title: "保存成功",
          icon: "success",
        });

        // 延迟返回上一页，确保用户看到成功提示
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      },
      fail: (err) => {
        console.log("获取内容失败:", err);
        uni.showToast({
          title: "获取内容失败",
          icon: "none",
        });
      },
    });
  }
};

// 编辑器准备就绪
const onEditorReady = () => {
  console.log("编辑器准备就绪");
  uni
    .createSelectorQuery()
    .select("#editor")
    .context((res) => {
      console.log("获取编辑器上下文:", res);
      editorCtx = res.context;

      // 设置初始内容
      if (editorCtx) {
        const params = getPageParams();

        // 如果有已有的内容，使用已有内容
        if (params.content) {
          editorCtx.setContents({
            html: params.content,
          });
          // 设置初始字数统计
          currentWordCount.value = getTextLength(params.content);
        } else {
          // 如果没有内容，编辑器为空，字数统计为0
          currentWordCount.value = 0;
        }
      }
    })
    .exec();
};

// 编辑器状态变化
const onStatusChange = (e) => {
  console.log("编辑器状态变化:", e.detail);
  Object.assign(formats, e.detail);
};

// 编辑器输入
const onInput = (e) => {
  console.log("编辑器输入:", e.detail);

  // 计算纯文本字数
  const textLength = getTextLength(e.detail.html);
  console.log("当前字数:", textLength);

  // 更新字数统计
  currentWordCount.value = textLength;

  // 如果字数超过500，阻止继续输入
  if (textLength > 500) {
    uni.showToast({
      title: "字数不能超过500字",
      icon: "none",
    });

    // 截断内容到500字
    if (editorCtx) {
      const truncatedHtml = truncateHtml(e.detail.html, 500);
      editorCtx.setContents({
        html: truncatedHtml,
      });
      // 更新字数统计为500
      currentWordCount.value = 500;
    }
  }
};

// 计算纯文本字数（不包括HTML标签）
const getTextLength = (html) => {
  if (!html) return 0;

  // 移除HTML标签获取纯文本
  return html.replace(/<[^>]*>/g, "").length;
};

// 截断HTML内容到指定字数
const truncateHtml = (html, maxLength) => {
  if (!html) return "";

  // 移除HTML标签获取纯文本
  const text = html.replace(/<[^>]*>/g, "");

  if (text.length <= maxLength) return html;

  // 截断纯文本
  const truncatedText = text.substring(0, maxLength);

  // 尝试保持HTML结构，但这是简化处理
  // 实际项目中可能需要更复杂的HTML解析
  return truncatedText;
};

// 插入有序列表
const insertOrderedList = () => {
  console.log("插入有序列表, editorCtx:", editorCtx);
  if (editorCtx) {
    console.log("设置有序列表");
    editorCtx.format("list", "ordered");
  } else {
    console.log("编辑器实例未准备好");
  }
};

// 插入无序列表
const insertUnorderedList = () => {
  console.log("插入无序列表, editorCtx:", editorCtx);
  if (editorCtx) {
    console.log("设置无序列表");
    editorCtx.format("list", "bullet");
  } else {
    console.log("编辑器实例未准备好");
  }
};

// 页面加载时初始化
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};

  // 获取页面类型
  pageType.value = options.type || "workContent";

  // 根据页面类型设置配置
  const config = pageConfigs[pageType.value];
  if (config) {
    pageTitle.value = config.title;
    tipText.value = config.tip;
    placeholderText.value = config.placeholder;
  }

  // 设置页面标题
  uni.setNavigationBarTitle({
    title: pageTitle.value,
  });
});
</script>

<style scoped lang="less">
.rich-text-container {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #00bdb4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.save-btn {
  font-size: 32rpx;
  color: #00bdb4;
  font-weight: 500;
  cursor: pointer;
}

/* 页面内容 */
.content {
  padding: 40rpx 30rpx;
  padding-bottom: 100rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 标题区域 */
.title-section {
  text-align: left;
  margin-bottom: 40rpx;
}

.main-title {
  display: block;
  font-size: 48rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 编辑器容器 */
.editor-container {
  flex: 1;
  width: 100%;
}

/* 富文本编辑器样式 */
.ql-container {
  width: 100%;
  height: 100%;
  min-height: 600rpx;
  font-size: 32rpx;
  line-height: 1.6;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 统计容器样式 */
.stats-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

/* 字数统计样式 */
.word-count {
  display: flex;
  align-items: center;
}

.word-count-text {
  font-size: 24rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 底部工具栏 */
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  padding: 25rpx 30rpx;
  z-index: 100;
}

.toolbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
}

.tool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  height: 70rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.tool-item:active {
  background-color: #e9ecef;
  transform: scale(0.95);
}

.tool-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
